<template>
  <el-card class="parent">
    <el-tabs v-model="activeName" class="demo-tabs">
      <!-- 类似option v-model选中的是pane中的name属性对应内容 -->
      <el-tab-pane label="销售额" name="销售额">销售额</el-tab-pane>
      <el-tab-pane label="访问量" name="访问量">访问量</el-tab-pane>
    </el-tabs>
    <!-- header右侧 -->
    <div class="son" >
      <span>今日</span>
      <span>本周</span>
      <span>本月</span>
      <span>本年</span>
      <!-- 日期选择 -->
      <!-- model数据收集 -->
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="-"
        start-placeholder="入住时间"
        end-placeholder="离开时间"
        size="small"
      />
    </div>
    
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 动态选中tabs的数据
// 默认选中销售额
let activeName = ref("销售额");



</script>

<style lang="scss" scoped>
.parent{
    position: relative;
}
.son{
    margin: 15px 15px;
    position: absolute;
    top: 0;
    right: 0;
    color: yellowgreen;
    &>span{
        margin: 0 10px;
    }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>